import {
  Button,
  Modal,
  TextField,
  Icon,
  Checkbox,
  Popover,
  ActionList,
} from "@shopify/polaris";
import {
  DeleteMinor,
  AddMajor,
  SearchMajor,
  CirclePlusOutlineMinor,
} from "@shopify/polaris-icons";
import { useState, useCallback } from "react";
import styled from "./index.module.less";
import { Divider } from "antd";

interface BAFDAS {
  label: string;
  value: string;
}
interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
  SBJDAS: BAFDAS[];
  setSBJDAS: Function;
}

function ModalExample({ active, setActive, SBJDAS }: Props) {
  //

  const [zujianneibu, setZujianneibu] = useState(SBJDAS);
  const [Xintianjia, setXintianjia] = useState([] as BAFDAS[]);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const [valueBQ, setValueBQ] = useState("");

  const handleChangeBQ = useCallback(
    (newValue: string) => setValueBQ(newValue),
    []
  );

  //

  //
  const [checkedCHS, setCheckedCHS] = useState(true);
  const handleChangeCHS = useCallback(
    (newChecked: boolean) => setCheckedCHS(newChecked),
    []
  );

  //
  const [ButtonValue, setButtonValue] = useState("常用");
  const [popoverActive, setPopoverActive] = useState(false);

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    []
  );

  const activator = (
    <div style={{ marginLeft: "10px", minWidth: "50px" }}>
      <Button
        
        icon={<span className="iconfont icon-24gl-swapVertical"></span>}
        onClick={togglePopoverActive}
      >
        {ButtonValue}
      </Button>
    </div>
  );

  return (
    <Modal
      //   activator={activator}
      open={active}
      noScroll
      titleHidden
      onClose={handleChange}
      title=""
    >
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>管理标签</div>
      </div>
      <div className={styled.CHXPO}>
        <Modal.Section>
          <div style={{ height: "430px" }}>
            <div style={{ display: "flex" }}>
              <div style={{ flex: "1" }}>
                <TextField
                  label=""
                  value={valueBQ}
                  onChange={handleChangeBQ}
                  autoComplete="off"
                  placeholder="搜索以查找或创建标签"
                  prefix={<Icon source={SearchMajor}></Icon>}
                />
              </div>
              {/*  */}
              <Popover
                active={popoverActive}
                activator={activator}
                autofocusTarget="first-node"
                onClose={togglePopoverActive}
              >
                <ActionList
                  actionRole="menuitem"
                  items={[
                    {
                      content: "按字母排序",
                      onAction: () => {
                        setButtonValue("按字母排序");
                        setPopoverActive(false);
                      },
                    },
                    {
                      content: "常用",
                      onAction: () => {
                        setButtonValue("常用");
                        setPopoverActive(false);
                      },
                    },
                  ]}
                />
              </Popover>
            </div>
            {SBJDAS && (
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  marginTop: "16px",
                  color: "#616161",
                }}
              >
                暂无标签
              </div>
            )}
            {SBJDAS && (
              <div>
                <div>
                  {valueBQ && (
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <div>
                        <Icon
                          source={CirclePlusOutlineMinor}
                          color="highlight"
                        ></Icon>
                      </div>
                      <div style={{ marginLeft: "1px" }}>
                        <Button
                          plain
                          onClick={() => {
                            setXintianjia([
                              ...Xintianjia,
                              { label: valueBQ, value: valueBQ },
                            ]);
                            setValueBQ("");
                          }}
                        >
                          添加"{valueBQ}"
                        </Button>
                      </div>
                    </div>
                  )}
                </div>
                {Xintianjia.length > 0 && (
                  <div>
                    <div style={{ fontSize: "13px", fontWeight: "600" }}>
                      新添加
                    </div>
                    <div>
                      {Xintianjia.map((item, index) => {
                        return (
                          <div
                            key={index}
                            style={{
                              margin: "2px 0",
                              cursor: "pointer",
                            }}
                          >
                            <div
                              onClick={() => {
                                const DBADSAD = Xintianjia;
                                let t = DBADSAD.splice(index, 1);
                                setXintianjia([...DBADSAD]);
                              }}
                              style={{ display: "flex", alignItems: "center" }}
                            >
                              <div>
                                <Checkbox
                                  label=""
                                  checked={checkedCHS}
                                  //   onChange={handleChangeCHS}
                                />
                              </div>
                              <div style={{ marginTop: "-2px" }}>
                                {item.label}
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                )}
                {SBJDAS.length > 0 && (
                  <div style={{ marginTop: "16px" }}>
                    <div style={{ fontSize: "13px", fontWeight: "600" }}>
                      已选
                    </div>
                    {zujianneibu.map((item, index) => {
                      return (
                        <div
                          key={index}
                          onClick={() => {
                            const HUSIODA = zujianneibu;
                            let t = HUSIODA.splice(index, 1);
                            setZujianneibu([...HUSIODA]);
                          }}
                          style={{
                            display: "flex",
                            alignItems: "center",
                            cursor: "pointer",
                          }}
                        >
                          <div>
                            <Checkbox
                              label=""
                              checked={checkedCHS}
                              //   onChange={handleChangeCHS}
                            />
                          </div>
                          <div style={{ marginTop: "-2px" }}>{item.label}</div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </div>
            )}
          </div>
        </Modal.Section>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            取消
          </Button>
        </div>
        <div style={{ marginLeft: "10px" }}>
          <Button
            size="slim"
            primary
            onClick={() => {
              // setSBJDAS([...zujianneibu, ...Xintianjia]);
            }}
          >
            完成
          </Button>
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
